<template>
  <div class="recommend">
    <Card></Card>
    <ul>
      <li 
      v-for="item in recommendList" 
      :key="item.id"
      >
          <h2>
            <img :src="item.imgUrl" alt="">
          </h2>
          <div>
            <h3>{{item.name}}</h3>
            <p>{{item.content}}</p>
            <div class="price">
              <span>￥</span>
              <b>{{item.price}}</b>
            </div>
          </div>
      </li>
    </ul>
  </div>
</template>

<script>
import Card from "@/components/home/Card.vue"
export default {
  components:{Card},
  props:{
    recommendList:Array
  },
  data() {
    return {
    }
  },
}
</script>

<style lang="scss" scoped>
.recommend ul li{
  position: relative;
}
.recommend ul li h2{
  text-align:center;
}
.recommend ul li img{
  width:9.6rem;
  height: 3.84rem;
  border-radius: 0.32rem;
}
.recommend ul li>div{
  position: absolute;
  right:0;
  top: 0;
  display: flex;
  flex-direction:column;
  padding:0.53rem;
}
.recommend ul li>div h3{
  font-size:12px;
}
.recommend ul li>div p{
font-size: 0.42rem;
}
.price{
  margin-top:0.66rem;
  color:red;
  text-align:right;
}
.price span{
  font-size:0.37rem;
}

.title{
  padding:0.26rem 0 ;
  width:100%;
  text-align:center;
  font-size:0.42rem;
}
.title h1::after{
  width:0.21;
}
</style>